{% extends "layout.html" %}
{% block content %}
    <div class="x-body layui-anim layui-anim-up">
        <form class="layui-form" lay-filter="form">
			<table class="layui-table">
				<tbody>
                    <tr>
						<th><span class="x-red">*</span>通道名称</th>
						<td colspan="1">
                            <input type="text" id="name" name="name" required="required" lay-verify="required"
                            autocomplete="off" class="layui-input">
                        </td>
						<th><span class="x-red">*</span>数据点类型</th>
						<td colspan="1">
                            <input type="radio" name="dataitem_type" value="0" title="公用" checked>
                            <input type="radio" name="dataitem_type" value="1" title="专用">
                        </td>
                    </tr>
					<tr>
						<th>协议</th>
						<td colspan="3">
							<select id="protocol" name="protocol" lay-filter="protocol"></select>
						</td>
					</tr>
					<tr id="host_part">
						<th><span class="x-red">*</span>主机IP</th>
						<td>
							<input type="text" id="host_ip" name="host_ip" required="required" lay-verify="host_ip"
                            autocomplete="off" class="layui-input">
						</td>
						<th><span class="x-red">*</span>主机端口号</th>
						<td>
							<input type="text" id="port" name="port" required="required|number" lay-verify="port"
                            autocomplete="off" class="layui-input" value="502">
						</td>
					</tr>
					<tr id="file_part">
						<th>目录</th>
						<td>
							<input type="text" id="path" name="path" required="required" lay-verify="path"
                            autocomplete="off" class="layui-input" value="data">
						</td>
						<th>文件名</th>
						<td>
							<input type="text" id="filename" name="filename" required="required" lay-verify="filename"
                            autocomplete="off" class="layui-input" value="">
						</td>
					</tr>
					<tr class="com_part1">
						<th id="com_label">COM口</th>
						<td>
							<!-- <input type="text" id="com" name="com" required="number" lay-verify="com"
                            autocomplete="off" class="layui-input" value="COM1"> -->
							<select id="com" name="com" lay-filter="com"></select>
						</td>
						<th id="band_rate_label">波特率</th>
						<td>
							<input type="text" id="band_rate" name="band_rate" required="number" lay-verify="band_rate"
                            autocomplete="off" class="layui-input" value="9600">
						</td>
					</tr>
					<tr class="com_part2">
						<th>奇偶校验</th>
						<td>
							<input type="text" id="parity" name="parity" required="number" lay-verify="parity"
                            autocomplete="off" class="layui-input" value="2">
						</td>
						<th>停止位</th>
						<td>
							<input type="text" id="stop" name="stop" required="number" lay-verify="stop"
                            autocomplete="off" class="layui-input" value="1">
						</td>
					</tr>
					<tr class="com_part21">
						<th>报文间隔时间/毫秒</th>
						<td colspan="3">
							<input type="text" id="IntervalTime" name="IntervalTime" required="number" lay-verify="IntervalTime"
								   autocomplete="off" class="layui-input" value="100">
						</td>
					</tr>
					<tr class="com_part3">
						<th id="local_ip_label">本地地址</th>
						<td>
							<input type="text" id="local_ip" name="local_ip" lay-verify="local_ip"
                            autocomplete="off" class="layui-input" value="127.0.0.1">
						</td>
						<th id="local_port_label">本地端口</th>
						<td>
							<input type="text" id="local_port" name="local_port" required="number" lay-verify="local_port"
                            autocomplete="off" class="layui-input" value="2404">
						</td>
					</tr>
					<tr id="modbus_port1">
						<th>Slave_id</th>
						<td>
							<input type="text" id="slave_id" name="slave_id" required="number" lay-verify="slave_id"
                            autocomplete="off" class="layui-input" value="1">
						</td>
						<th><span class="x-red">*</span>寄存器类型</th>
						<td>
							<select id="register_type" name="register_type" lay-filter="register_type">
                                <option value="1">线圈状态</option>
                                <option value="2">输入状态</option>
                                <option value="4">保持寄存器</option>
								<option value="5">写线圈状态</option>
								<option value="6">写保持寄存器</option>
								<option value="15">写多个线圈状态</option>
								<option value="16">写多个保持寄存器</option>
                                <option value="3" selected>输入寄存器</option>
                            </select>
						</td>
					</tr>
					<tr id="modbus_port2">
						<th>地址</th>
						<td>
							<input type="text" id="address" name="address" required="number" lay-verify="address"
                            autocomplete="off" class="layui-input" value="0">
						</td>
						<th>数量</th>
						<td>
							<input type="text" id="count" name="count" required="number" lay-verify="count"
                            autocomplete="off" class="layui-input" value="0">
						</td>
					</tr>
                    <tr id="run">
						<th><span class="x-red">*</span>运行周期</th>
						<td colspan="1">
							<input type="text" id="run_cycle" name="run_cycle" required="number" lay-verify="run_cycle"
                            autocomplete="off" class="layui-input" value="60">
                        </td>
						<th><span class="x-red">*</span>运行</th>
						<td colspan="1">
                            <input type="checkbox" name="enable" lay-skin="switch" lay-text="运行|停用" checked>
                        </td>
                    </tr>
					<tr>
						<td colspan="2" style="text-align: center;">
                            <button id="confirmBtn" class="layui-btn" lay-filter="save" lay-submit="">
                                增加
                            </button>
                        </td>
						<td colspan="2" style="text-align: center;">
							<button  type="reset" class="layui-btn">
                                重置
                            </button>
						</td>
					</tr>
                </tbody>
            </table>
        </form>
    </div>
    <script>
        var channel_id=GetQueryString('channel_id');
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
            var form = layui.form
            ,layer = layui.layer;
            $.ajax({
                url:"../protocol/protocoList4collect",
                type:"POST",
                dataType:"json",
                success:function(data){
                    $("protocol").empty();
                    $.each(data.data,function(protocol_key,protocol_val){
                        $("#protocol").append(new Option(protocol_val.protocol,protocol_val.protocol_id));
                    });
                    layui.form.render();
                    set_part_show();
                    $.ajax({
                        url:"../modbus/read_serial_ports",
                        type:"POST",
                        dataType:"json",
                        success:function(data){
                            $("com").empty();
                            $.each(data.data,function(com_key,com_val){
                                $("#com").append(new Option(com_val,com_val));
                            });
                            layui.form.render();
                            if(channel_id!=null){
                                data={'channel_id':channel_id};
                                $('#confirmBtn').html('保存');
                                $.ajax(
                                {
                                    url:'readChannel'
                                    ,type:'POST'
                                    ,dataType:'json'
                                    ,data:data
                                    ,success:function(data){
                                        //设置内容
                                        if(data.code==0){
                                            channel_id=data.data[0].channel_id;
											var filename = "";
											var IntervalTime = 100;
											if(data.data[0].filename!=null){
												if(data.data[0].filename.split("&").length===2){
													filename = data.data[0].filename.split("&")[0]
													IntervalTime = data.data[0].filename.split("&")[1]
												}
											}
                                            form.val("form",{
                                                name:data.data[0].name,
                                                dataitem_type:data.data[0].dataitem_type,
                                                host_ip:data.data[0].host_ip,
                                                port:data.data[0].port,
                                                protocol:data.data[0].protocol,
                                                path:data.data[0].path,
                                                filename:filename,
                                                com:data.data[0].com,
                                                band_rate:data.data[0].band_rate,
                                                local_ip:data.data[0].com,
                                                local_port:data.data[0].band_rate,
                                                parity:data.data[0].parity,
                                                stop:data.data[0].stop,
                                                enable:data.data[0].enable=="1",
                                                slave_id:data.data[0].slave_id,
                                                register_type:data.data[0].register_type,
                                                address:data.data[0].address,
                                                count:data.data[0].count,
                                                run_cycle:data.data[0].run_cycle,
												IntervalTime:IntervalTime
                                            });
                                            layui.form.render();
                                            set_part_show();
                                        }
                                    }
                                });
                            }
                        }
                    });
                }
            });
            //自定义验证规则
            form.verify({
                host_ip: function(value){
                    if(!["4","6"].includes($("#protocol").val()))return;
                    var exp=/^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))).){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
                    if(!exp.test(value)){
                        return '必须是合法的IPV4地址';
                    }
                },
                port: function(value){
                    if(!["4","6"].includes($("#protocol").val()))return;
                    var exp=/^\d+$/;
                    if(!exp.test(value)){
                        return '必须是整数';
                    }
                    var val=parseInt(value);
                    if(val<0||val>65525){
                        return '必须是0-65535之间的合法端口号';
                    }
                },
                path: function(value){
                    if(value.length==0)
                        return "必须填写目录";
                },
                filename: function(value){
                    if(value.length==0&&$("#protocol").val()==3)
                        return "必须填写文件名";
                },
                band_rate: function(value){
                    var exp=/^\d+$/;
                    if(!exp.test(value)&&$("#protocol").val()==2){
                        return '必须是整数';
                    }
                    if($("#protocol").val()==2&&value.length()==0)
                    return "必须填写波特率";
                },
            });
            function set_part_show(){
                $("#host_part").hide();
                $("#file_part").hide();
                $(".com_part1").hide();
                $(".com_part2").hide();
				$(".com_part21").hide();
				$(".com_part3").hide();
                $("#modbus_port1").hide();
				$("#modbus_port2").hide();
				// $("#com").removeAttr('disabled');
                // $("#com_label").html("COM口");
                // $("#band_rate_label").html("波特率");
                if($("#protocol").val()=="4"){
                    $("#host_part").show();
                    $(".com_part3").show();
					$("#run").show();
					// $(".com_part1").show();
                    // $("#com").attr('disabled','disabled');
                    // $("#com_label").html("本地地址");
                    // $("#band_rate_label").html("本端端口");
                }
                if($("#protocol").val()=="6"){
                    $("#host_part").show();
                }
                if(["6","7"].includes($("#protocol").val())){
                    $("#modbus_port1").show();
					if(["1","2","3","4"].includes($("#register_type").val())){
						$("#modbus_port2").show();
						$("#run").show();
					}else{
						$("#modbus_port2").hide();
						$("#run").hide();
					}
                }
                if($("#protocol").val()==7){
                    $(".com_part1").show();
                    $(".com_part2").show();
					$(".com_part21").show();
				}
                if($("#protocol").val()==3)
                    $("#file_part").show();
            }
			function set_modbus_show(){
				if(["1","2","3","4"].includes($("#register_type").val())){
					$("#modbus_port2").show();
					$("#run").show();
				}else{
					$("#modbus_port2").hide();
					$("#run").hide();
				}
			}
            form.on('select(protocol)',function(data){
                set_part_show();
            });
			form.on('select(register_type)',function(data){
				set_modbus_show();
			})

            //监听提交
            form.on('submit(save)', function(data){
                if(data.field['band_rate']==""){
                    data.field['band_rate']=0;
                }
                if(data.field['local_port']==""){
                    data.field['local_port']=0;
                }
                if($("#protocol").val()=="4"){
                    data.field['com']=$("#local_ip").val();
                    data.field['band_rate']=$("#local_port").val();
                }
                if(channel_id!=null)
                    data.field['channel_id']=channel_id;
                $.ajax({url:'saveChannel',type:'POST',dataType:'json',data:data.field,success:function(data){
                    // console.log(data);
                    if(data.code==0){
                        // layer.msg('操作成功!');
                        layer.alert("操作成功", {icon: 6},function () {
                            parent.location.reload();
                            // 获得frame索引
                            var index = parent.layer.getFrameIndex(window.name);
                            //关闭当前frame
                            parent.layer.close(index);
                        });
                    }else{
                    	layer.msg(data.msg);
					}
                }});
                return false;
            });
        });
    </script>
{% endblock %}